import { defineStore } from "pinia";
import { computed, ref } from "vue";
import arson from 'arson';
import { nanoid } from 'nanoid';
export const useResumeStore = defineStore("resume", () => {
  const resumeList = ref([
  ]);

  const createResume = (model) => { 
    const day = Date.now();
    const id = nanoid();

    const resume =  {
    baseInfo:[
      {
        title: "基本信息",
        icon: "User",
        customList: [
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
        ],
        materialList: [
          {
            label: "头像",
            url: "https://img0.baidu.com/it/u=4196045212,2369631059&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            width:'100',
            height:'120',
            isShow: true,
          },
        ],
        baseInfoList: [
          {
            label: "姓名",
            value: "",
            placeholder: "请输入姓名",
            type: "input",
            icon: "",
            draggable: false,
            isShow: true,
            isDelete: false,
          },
          {
            label: "职位",
            value: "",
            placeholder: "请输入职位",
            type: "input",
            icon: "",
            draggable: false,
            isShow: true,
            isDelete: false,
          },
          {
            label: "状态",
            value: "",
            placeholder: "请输入状态",
            type: "input",
            icon: "Box",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "生日",
            value: "",
            placeholder: "请输入生日",
            type: "input",
            icon: "Timer",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "邮箱",
            value: "",
            placeholder: "请输入邮箱",
            type: "input",
            icon: "Message",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "电话",
            value: "",
            placeholder: "请输入电话",
            type: "input",
            icon: "Phone",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "地址",
            value: "",
            placeholder: "请输入地址",
            type: "input",
            icon: "Location",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
        ],
        showSetting: false,
        draggable: false,
        showItem: false,
        isDelete: false,
        active: true,
        component: "baseInfo",
      },
      {
        title: "工作经验",
        icon: "EditPen",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        active: false,
        isShow: true,
        itemList: [
          {
            isShow: true,
            isDelete: true,
            isExtend: false,
            draggable: true,
            itemInfo: {
              companyName: {
                label: "公司名称",
                value: "",
                required: true,
                placeholder: "输入公司名称",
              },
              companyAddress: {
                label: "公司地址",
                value: "",
              },
              workTime: {
                label: "工作时间",
                value: "",
              },
              //岗位
              workPost: {
                label: "岗位",
                value: "",
              },
              itemContent: {
                label: "工作内容",
                value: "",
              },
            },
          },
        ],
        component: "workExperience",
      },
      {
        title: "专业技能",
        icon: "Discount",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        active: false,
        component: "skills",
        value: "",
        isShow: true,
      },
      {
        title: "项目经历",
        icon: "List",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        isShow: true,
        active: false,
        component: "project",
        itemList: [
          {
            isShow: true,
            isDelete: true,
            isExtend: false,
            draggable: true,
            itemInfo: {
              projectName: {
                label: "项目名称",
                value: "",
              },
              projectRole: {
                label: "项目角色",
                value: "",
              },
              projectLink: {
                label: "项目链接",
                value: "",
              },
              projectTime: {
                label: "项目时间",
                value: "",
              },
              itemContent: {
                label: "项目描述",
                value: "",
              },
            },
          },
        ],
      },
      {
        title: "教育经历",
        icon: "School",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        isShow: true,
        active: false,
        component: "school",
        itemList: [
          {
            isShow: true,
            isDelete: true,
            isExtend: false,
            draggable: true,
            itemInfo: {
              //名称、专业、学历、gpa、开始时间、结束时间
              schoolName: {
                label: "学校名称",
                value: "",
              },
              schoolMajor: {
                label: "专业",
                value: "",
              },
              schoolDegree: {
                label: "学历",
                value: "",
              },
              schoolGpa: {
                label: "GPA",
                value: "",
              },
              schoolStartTime: {
                label: "开始时间",
                value: ''
              },
              schoolEndTime: {
                label: "结束时间",
                value: ''
              },
              itemContent: {
                label: "学习经历",
                value: "",
              },
            },
          },
        ],
      },
      {
        title: "个人简介",
        icon: "Star",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        isShow: true,
        active: false,
        component: "self",
        value: "",
      },
    ],
    //主题色
    themeColor: {
        color: "#409EFF",
    },
    //排版
    typography: {
        //行高
        lineHeight: {
            max:1.5,
            min:1.2,
            value:1.5
        },
        //字体大小
        fontSize: {
            max: 20,
            min: 12,
            value: 14
        },
        //字体颜色
        fontColor: {
            value: "#000000"
        },
        //一级标题
        titleFontSize: {
            max: 25,
            min: 12,
            value: 16
        },
        // 模块标题
        moduleTitleFontSize: {
            max: 30,
            min: 12,
            value: 18
        },



    },
    //间距
    spacing: {
        //段间距
        paragraphSpacing: {
            max: 20,
            min: 10,
            value: 15
        },
        //项目间距
        projectSpacing: {
            max: 20,
            min: 10,
            value: 15
        },
        //项目内容间距
        projectContentSpacing: {
            max: 20,
            min: 10,
            value: 15
        }
    },
    // 模式
    mode: {
        //图标模式
        iconMode: {
            value: true
        },
        //副标题居中
        subTitleMode: {
            value: true
        }
    },
    resumeInfo:{
        createTime:day,
        updateTime:day,
        templateId:model.id||1,
        active:false,
        resumeId:id,
        resumeName:'我的简历'+(id+'').slice(0,5),
        showFooter:true,

    }
  }
    resumeList.value.push(resume);
  };
  const deleteResume = (index) => {
    resumeList.value.splice(index, 1);
  };
  const setActive = (id) => {

    resumeList.value.forEach((item) => {
      item.resumeInfo.active = false;
    });
    resumeList.value.find((item) => item.resumeInfo.resumeId === id).resumeInfo.active = true;
}
  const activeResume = computed(() => {
    return resumeList.value.find((item) => item.resumeInfo.active);
  });
  const baseInfo = computed(() => activeResume.value.baseInfo)
    const workInfo = computed(()=>activeResume.value.baseInfo.find((item) => item.component === 'workExperience'))
    const skillsInfo = computed(()=>activeResume.value.baseInfo.find((item) => item.component === 'skills'))
    const projectInfo = computed(()=>activeResume.value.baseInfo.find((item) => item.component === 'project'))
    const schoolInfo = computed(()=>activeResume.value.baseInfo.find((item) => item.component === 'school'))
    const selfInfo = computed(()=>activeResume.value.baseInfo.find((item) => item.component === 'self'))
    const resumeInfo = computed(()=>activeResume.value.resumeInfo)

    const themeColor = computed(()=>activeResume.value.themeColor)
    const typography = computed(()=>activeResume.value.typography)
    const spacing = computed(()=>activeResume.value.spacing)
    const mode = computed(()=>activeResume.value.mode)
  return { setActive,baseInfo,resumeList,activeResume,deleteResume,createResume,workInfo,skillsInfo,projectInfo,schoolInfo,selfInfo,resumeInfo,themeColor,typography,spacing,mode };
},{
    persist: {

      serializer: {

        serialize: arson.stringify,


        deserialize: arson.parse,
      }
    }})